<template>
  <div class="page">
    <div class="J-recharge-list">
      <get-data :scroller-data="getBalanceLogs" :config="config" ref="scroller"  :type="type">
        <div class="weui-flex pl line-bottom" v-for="item in getBalanceLogs.data">
          <div class="weui-flex__item">
              <div class="record_">
                <span class="fl">余额：{{item.balance}}</span>
              </div>
              <div class="record_">
                <span class="fl font-12">订单号：{{item.order_no}}</span>
              </div>
              <div class="record_">
                <span class="fl font-12 color-2">{{item.createTime}}</span>
                <span class="fr int-del">{{item.amount}}</span>
              </div>
          </div>
        </div>
      </get-data>
    </div>
    <div v-if="isData" class="nodata">暂无消费记录</div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import GetData from '~components/mixins/getData.vue'
  export default {
    name: 'recharge-list',
    data () {
      return {
        isData: true,
        type: 'getBalanceLogs',
        config:{
          id: this.$route.query.id,
          page:'1'
        }
      }
    },
    computed: {
      ...mapGetters({
        getBalanceLogs: 'getBalanceLogs'
      })
    },
    components: {
      GetData
    },
    mounted () {
      var _this = this
      if (_this.getBalanceLogs.data.length == 0 || _this.getBalanceLogs.code == '404') {
        _this.$refs.scroller.getData(this.config.id)
      } else {
        this.isData = false
      }
    }
  }
</script>
<style lang="scss">
  .J-recharge-list{
    background-color:#fff;
    height:100%;
    .weui-flex__item:after{
      bottom:-10px;
    }
    .weui-flex{
      padding:10px;
    }
    .record_a{
      color:#333;
    }
    .record_{
      overflow: hidden;
      font-size: 14px;
      .int-add,.int-del{
        position: absolute;
        top:18px;
        right:10px;
      }
      .int-add{
        font-size:16px;
        color:#009900;
      }
      .int-del{
        color:red;
        font-size:16px;
      }
      em {
        font-style: normal;
        color: #009900;
        margin-right: 5px;
      }
    }
  }
</style>
